import React, { useRef } from "react";
import ReactECharts from "echarts-for-react";

import "./Chart10.less";

function Chart10() {
  const myChart = useRef(null);
  const clickIndex = useRef(-1);

  const branchName = [
    "上海商城支行",
    "深圳分行",
    "上海香港广场支行",
    "北京中粮广场支行",
    "杭州黄龙支行1",
    "杭州黄龙支行2",
    "杭州黄龙支行3",
    "杭州黄龙支行4",
    "杭州黄龙支行5",
    "杭州黄龙支行6",
    "杭州黄龙支行7",
    "杭州黄龙支行8",
    "杭州黄龙支行9",
    "杭州黄龙支行10",
  ];

  let option = {
    backgroundColor: "#05050f",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        fontSize: 16,
        align: "left",
      },
      formatter: (data) => {
        let str = `${data[0].axisValue}</br>`;
        data.forEach((item, i) => {
          if (data[i].seriesName !== "辅助bar") {
            str += `${item.marker}${item.seriesName} : ${item.data}</br>`;
          }
        });
        return str;
      },
    },
    title: {
      text: "Product",
      left: "12",
      bottom: "110",
      textStyle: {
        fontSize: "12",
        color: "#fff",
      },
    },
    legend: {
      left: "12",
      bottom: "89",
      data: ["CD4", "T10", "TD5"],
      textStyle: {
        color: "#fff",
        fontSize: "12",
      },
      //  itemWidth : 15,
      icon: "circle",
      //  itemGap: 40,
    },
    grid: {
      left: "12",
      top: "20",
      right: "4%",
      bottom: "180",
      containLabel: true,
    },
    dataZoom: [
      {
        type: "inside",
        id: "insideY",
        yAxisIndex: 0,
        start: 0,
        end: 70,
        zoomOnMouseWheel: false,
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      },
    ],
    xAxis: [
      {
        type: "value",
        position: "top",
        minInterval: 10000,
        //设置坐标轴字体颜色和宽度
        axisLine: {
          lineStyle: {
            color: "#6a6a9f",
          },
        },
        // 控制网格线是否显示
        splitLine: {
          show: true,
          lineStyle: {
            // 使用深浅的间隔色
            color: ["#6a6a9f"],
          },
        },
        axisLabel: {
          color: "#fff",
          textStyle: {
            fontSize: "12",
          },
          formatter: (value) => {
            if (value >= 10000) {
              return `${(value / 1000).toFixed(0)}k`;
            } else {
              return value;
            }
          },
        },
      },
      {
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        type: "category",
        z: 3,
        inverse: true,
        data: branchName,
        //设置坐标轴字体颜色和宽度
        axisLine: {
          lineStyle: {
            color: "#6a6a9f",
          },
        },
        // 去除y轴上的刻度线
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
          nameTextStyle: {
            fontSize: "12",
          },
          rich: {
            title: {
              width: 120,
              fontSize: "12",
            },
            white: {
              color: "#fff",
              fontSize: "12",
            },
          },
        },
      },
    ],
    series: [
      {
        name: "CD4",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#5b8ff9",
          borderWidth: 4,
          borderColor: "#05050f",
        },
        data: [
          17000, 15000, 9000, 3000, 9000, 9000, 9000, 9000, 9000, 9000, 9000,
          9000, 9000, 9000,
        ],
        barWidth: 56,
      },
      {
        name: "T10",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#61ddaa",
          borderWidth: 4,
          borderColor: "#05050f",
        },
        data: [
          10000, 8000, 5000, 6000, 4000, 4000, 4000, 4000, 4000, 4000, 4000,
          4000, 4000, 4000,
        ],
        barWidth: 56,
      },
      {
        name: "TD5",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#65789b",
          borderWidth: 4,
          borderColor: "#05050f",
        },
        data: [
          9000, 9000, 7000, 7000, 2000, 2000, 2000, 2000, 2000, 2000, 2000,
          2000, 2000, 2000,
        ],
        barWidth: 56,
      },
      {
        name: "辅助bar",
        type: "bar",
        barGap: "-100%",
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        xAxisIndex: 1,
        itemStyle: {
          color: "rgba(255,255,255,0.16)",
        },
        barWidth: 56,
      },
    ],
  };

  const onChartClick = (params) => {
    let itemIndex = clickIndex.current;
    const chartInstance = myChart.current.getEchartsInstance();
    if (params.componentType === "series") {
      const index = params.dataIndex;
      // add background
      if (itemIndex === index) {
        option.series[option.series.length - 1].data[itemIndex] = 0;
        chartInstance.setOption(option);

        clickIndex.current = -1;
      } else {
        option.series[option.series.length - 1].data[itemIndex] = 0;
        option.series[option.series.length - 1].data[index] = 1;
        chartInstance.setOption(option);

        clickIndex.current = index;
      }
    }
  };

  return (
    <>
      <div className="branch-list-bar-container">
        <ReactECharts
          ref={myChart}
          option={option}
          className="branch-list-bar"
          onEvents={{ click: onChartClick }}
        />
      </div>
    </>
  );
}

export default Chart10;
